<template>
    <div>
        <el-row>
            <el-col>
                <el-form :inline="true" :model="formInline">
                    <el-form-item>
                        <el-input size="mini" v-model="formInline.num" placeholder="请输入设备编号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input size="mini" v-model="formInline.name" placeholder="请输入设备名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-button type="primary" size="mini" @click="view" style="margin-bottom: 10px">生成</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="20">
                <el-table
                        :data="tableData"
                        size="mini"
                        border
                        style="width: 100%">
                    <el-table-column
                            align="center"
                            prop="NUM"
                            label="设备编号">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="NAME"
                            width="100px"
                            label="资产名称">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="CLASSIFICATIONNAME"
                            label="归类属性">
                    </el-table-column>
                    <el-table-column
                            align="center"
                            prop="AMOUNT"
                            label="单价/元">
                    </el-table-column>
                    <!--<el-table-column
                      align="center"
                      prop="SPECS"
                      label="规格">
                    </el-table-column>-->
                    <el-table-column
                            align="center"
                            prop="MODEL"
                            width="180px"
                            label="型号">
                    </el-table-column>
                    <!--<el-table-column
                      align="center"
                      prop="TYPENUM"
                      label="分类号">
                    </el-table-column>-->
                    <el-table-column
                            align="center"
                            prop="COMPANYNAME"
                            label="单位名称">
                    </el-table-column>
                    <!--<el-table-column
                            align="center"
                            prop="COMPANY"
                            label="使用单位">
                    </el-table-column>-->
                    <el-table-column
                            align="center"
                            prop="DIRECTIONNAME"
                            label="使用方向">
                    </el-table-column>
                    <!--<el-table-column
                            align="center"
                            prop="TYPENUM"
                            label="分类号">
                    </el-table-column>-->
                    <el-table-column
                            align="center"
                            prop="STATUS"
                            label="状态">
                        <template slot-scope="scope">
                            {{scope.row.STATUS ? '启用': '禁用'}}
                        </template>
                    </el-table-column>
                    <!--<el-table-column
                      align="center"
                      prop="ISVALUABLE"
                      label="是否贵重">
                      <template slot-scope="scope">
                        {{scope.row.ISVALUABLE ? '是': '否'}}
                      </template>
                    </el-table-column>
                      <el-table-column
                              align="center"
                              prop="ISCONSUMABLES"
                              label="是否易耗">
                        <template slot-scope="scope">
                          {{scope.row.ISCONSUMABLES ? '是': '否'}}
                        </template>
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="ISNORMAL"
                              label="是否正常">
                        <template slot-scope="scope">
                          {{scope.row.ISNORMAL ? '是': '否'}}
                        </template>
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="ISAPPOINTMENT"
                              label="预约">
                        <template slot-scope="scope">
                          {{scope.row.ISAPPOINTMENT ? '是': '否'}}
                        </template>
                      </el-table-column>
                      <el-table-column
                              align="center"
                              prop="ISRECEIVE"
                              label="领用">
                        <template slot-scope="scope">
                          {{scope.row.ISRECEIVE ? '是': '否'}}
              </template>
            </el-table-column>-->
                    <el-table-column
                            align="center"
                            prop="PRESENTNAME"
                            label="现状">
                    </el-table-column>
                    <!--<el-table-column
                            align="center"
                            prop="COUNTRY"
                            label="国别">
                    </el-table-column>
                      <el-table-column
                              align="center"
                              prop="SOURCENAME"
                              label="来源">
                      </el-table-column>-->
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :page-size="pagination.pageSize"
                        :total="pagination.total"
                        :page-sizes="[10, 20, 30, 50, 100]"
                >
                </el-pagination>
            </el-col>
        </el-row>
        <el-dialog title="设备生命周期" :visible.sync="dialogFormVisible" center width="40%">
            <el-row>
                <el-col>
                    <el-form :model="form" :label-width="formLabelWidth">
                        <el-form-item label="数量">
                            <el-input size="mini" v-model="form.NUM" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="save">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "qrCode",
        data() {
            return {
                formLabelWidth: '120px',
                form: {},
                formInline: {},
                tableData: [],
                dialogFormVisible: false,
                pagination: {
                    pageSize: 20,
                    total: 1,
                    pageNo: 1
                },
            }
        },
        created() {
            this.getData(this.pagination.pageSize, this.pagination.pageNo)
        },
        methods: {
            getData(pageSize, pageNo) {
                this.$post('/insrtumentQR/findInstrumentQR', {pageSize, pageNo}).then(res => {
                    this.tableData = res.data.data.dataList;
                    this.pagination.total = res.data.data.total;
                })
            },
            view() {
                this.dialogFormVisible = true;
            },
            save() {
                this.$post('/insrtumentQR/add', {num: this.form.NUM}).then(res => {
                    if(res.data.status != 1) {
                        this.$message.error(res.data.MSG);
                        return;
                    }
                    this.dialogFormVisible = false;
                    this.getData(this.pagination.pageSize, this.pagination.pageNo)
                })
            },
            search() {
                this.formInline.pageSize = this.pagination.pageSize;
                this.formInline.pageNo = 1;
                this.$post('/insrtumentQR/findInstrumentQR', this.formInline).then(res => {
                    if(res.data.status != 1) {
                        this.$message.error('条件输入错误，请检查');
                        return;
                    }
                    this.pagination.total = res.data.data.total;
                    this.tableData = res.data.data.dataList;
                })
            },
            handleSizeChange(size) {
                this.pagination.pageSize = size;
                this.getData(size, this.pagination.pageNo);
            },
            handleCurrentChange(page) {
                this.pagination.pageNo = page;
                this.getData(this.pagination.pageSize, page);
            },
        }
    }
</script>

<style scoped>

</style>
